<template>
	<div class="" @longpress="long">
		<view class="flex align-center justify-center pb-4 pt-2" v-if="showTime">
			<text class="font-sm text-light-muted">{{showTime}}</text>
		</view>
		<view v-if="item.isremove" class="flex align-center justify-center pb-4 pt-2" ref="isremove">
			<text class="font-sm text-light-muted">你撤回了一条消息</text>
		</view>
		<!-- 		系统消息 -->
		<view v-if="item.type == 'system'" class="flex align-center justify-center pb-4 pt-2" ref="isremove">
			<text class="font-sm text-light-muted">{{item.data}}</text>
		</view>
		<view v-if="item.type !== 'system'&&!item.isremove" class="flex align-start  position-relative pb-4 pt-2"
			:class="isself ?'justify-end':'justify-start'">
			<template v-if="!isself">
				<free-avater size="70" :src="item.from_avatar" @clickavator="clickavator1">
				</free-avater>
				<text class="iconfont text-white font-md position-absolute"
					style="left: 80rpx;top:40rpx">&#xe609;</text>
			</template>

			<view class="flex flex-column">
				<view :class="nicknameClass" v-if="shownickname" style="max-width: 500rpx;background-color: rgba(0,0,0,0);">
					<text class="font-sm text-muted"> {{item.from_name}}</text>
				</view>
				<view class=" p-2 rounded " style="max-width: 500rpx;" :style="labelStyle" :class="labelclass">
					<text class="font-md" v-if="item.type == 'text'">{{item.data}}</text>
					<!-- 图片表情包 -->
					<image @load="loadImage" v-if="item.type == 'emoticon' || item.type == 'image'" class="rounded"
						@click="preview(item.data)" lazy-load mode="widthFix" :src="item.data"
						style="width: 300rpx;height:300rpx;"></image>
					<!-- 语音 -->
					<view class="flex align-center" v-if="item.type == 'audio'" @click="openAudio(item.data)">
						<image v-if="!audioplay && isself " src="/static/images/audio/audio3.png"
							style="width: 95rpx;height: 95rpx;" class="mx-1" mode=""></image>

						<image v-if="audioplay && isself" src="/static/images/audio/play.gif"
							style="width: 95rpx;height: 95rpx;" class="mx-1" mode=""></image>
						<text class="font">{{item.options.time}}'</text>
						<image v-if="!audioplay && !isself " src="/static/images/audio/audio3.png"
							style="width: 95rpx;height: 95rpx;" class="mx-1" mode=""></image>

						<image v-if="audioplay && !isself" src="/static/images/audio/play.gif"
							style="width: 95rpx;height: 95rpx;" class="mx-1" mode=""></image>

					</view>
					<!-- 短视频 -->
					<view class="position-relative rounded" v-if="item.type=='video'" @click="openvideo(item.data)">
						<free-avater size="350" :src="item.data+'?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png'" class="bg-light">
						</free-avater>
						<text class="iconfont text-white position-absolute"
							style="font-size: 80rpx;left:136rpx;top:88rpx;">&#xe737;</text>
					</view>
				</view>
			</view>
			<template v-if="isself">
<!-- 				:style="shownickname?'top:22px':'top:20rpx'" -->
				<text v-if="haslabelclass" class="iconfont text-chat-item font-md position-absolute"
					style="right: 80rpx;top:22px" >&#xe640;</text>
				<free-avater size="70" :src="item.from_avatar">
				</free-avater>
			</template>
		</view>
		<view v-if="item.sendStatus && item.sendStatus!=='success'" class="flex align-center justify-end px-4">
			<text class="font-sm"
				:class="item.sendStatus == 'fail'?'text-danger':'text-muted'">{{item.sendStatus == 'fail'? '发送失败':'发送中'}}</text>

		</view>
	</div>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import $T from "@/common/free-lib/time.js"
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		props: {
			item: Object,
			index: Number,
			shownickname: {
				type: Boolean,
				default: false
			},
			pretime: [Number, String]
		},
		computed: {
			...mapState({
				ceshi: state => state.audio.ceshi,
				user: state => state.user.user

			}),
			labelStyle() {
				if (this.item.type == 'audio') {
					let time = this.item.options.time || 0;
					let width = parseInt(time) / (60 / 500);
					width = width < 150 ? 150 : width
					return `width:${width}rpx`
				}
			},
			isself() {
				let id = this.user.id;

				return this.item.from_id == id
			},
			showTime() {
				return $T.getChatTime(this.item.create_time, this.pretime)
			},
			haslabelclass() {
				return this.item.type == 'text' || this.item.type == 'audio'
			},
			labelclass() {
				let label = this.haslabelclass ? 'bg-chat-item mr-3' : 'mr-3';
				return this.isself ? label : 'bg-white ml-3'
			},
			nicknameClass() {
				let c = this.isself ? 'justify-end' : ''
				return c + ' ' + this.labelclass
			}
		},
		data() {
			return {
				innerAudioContext: null,
				audioplay: false
			}
		},
		components: {
			freeNavBar,
			freeAvater
		},
		destroyed() {
			if (this.item.type == 'audio') {
				this.audiooff(this.onplayaudio)
			}
			if (this.innerAudioContext) {
				this.innerAudioContext.stop();
				this.innerAudioContext = null
			}

		},
		mounted() {
			if (this.item.type == 'audio') {
				this.audioon(this.onplayaudio)
			}


		},
		methods: {
			clickavator1() {
				console.log(1233, "1233");
				uni.navigateTo({
					url: "/pages/mail/userBase/userBase"
				})
			},

			...mapActions(['audioon', 'audioemit', 'audiooff']),
			//监听播放音频
			onplayaudio(index) {
				if (this.innerAudioContext) {
					if (this.index !== index) {
						this.innerAudioContext.pause()
					}
				}
			},
			openvideo(data) {
				uni.navigateTo({
					url: `/pages/chat/video?url=${data}`
				})
			},
			openAudio(url) {
				this.audioemit(this.index)
				console.log(this.innerAudioContext, "innerAudioContext");
				if (!this.innerAudioContext) {

					this.innerAudioContext = uni.createInnerAudioContext();


					this.innerAudioContext.src = this.item.data

					this.innerAudioContext.play()
					//监听播放
					this.innerAudioContext.onPlay(() => {

						this.audioplay = true
					})
					//监听暂停
					this.innerAudioContext.onPause(() => {
						this.audioplay = false
					})
					//监听停止
					this.innerAudioContext.onStop(() => {
						this.audioplay = false
					})
					this.innerAudioContext.onError(() => {
						this.audioplay = false
					})
				} else {

					this.innerAudioContext.pause()

					this.innerAudioContext.play()

				}

			},


			loadImage(e) {
				console.log(e, "loade");
				// let w = e.detail.width;
				// let h = e.detail.height;
				// let max=uni.upx2px(500);
				// if(w<=max){

				// }
				// maxH=max*(h/w);
			},
			preview(item) {
				console.log(item, "item");
				this.$emit('preview', item)
				// uni.previewImage({
				// 	current:item,
				// 	urls:[item]
				// })
			},
			long(e) {
				console.log(e, "e");
				let x = 0;
				let y = 0;
				// #ifndef APP-PLUS-NVUE
				if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) {
					x = e.changedTouches[0].screenX
					y = e.changedTouches[0].screenY
				}

				// #endif
				// #ifdef MP
				x = e.detail.x;
				y = e.detail.y
				// #endif

				this.$emit('long', {
					x,
					y,
					index: this.index,
					item: this.item
				})
			},
		}
	}
</script>

<style>
</style>
